<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--<style type="text/css">
			#mark{
				width:1000px;
				height: 1000px;
				background: rgba(0,0,0,0.5);
				position: absolute;
				top:0px;
				left:0px;
			}
		</style>-->
	</head>
	<body>
		<!--
			需求：获取当前网页的大小，创建一个div设置高度和宽度与网页一样大，
			添加到网页中，遮挡网页的内容，并且div是半透明的背景色。
		-->
		<!--<div id="mark"></div>-->
		获取当前网页的大小，创建一个div设置高度和宽度与网页一样大，
			添加到网页中，遮挡网页的内容，并且div是半透明的背景色。
		<script type="text/javascript">
			/*遮罩层的原理：
			 * //1.找到mark的DIV
			var mark=document.getElementById("mark");
			//2.获取HTML标签上的宽度和高度
			var mx=document.documentElement.clientWidth;
			var my=document.documentElement.clientHeight;
			//console.log(mx,my);
			//3.把HTML标签的高度和宽度赋给mark的宽高
			mark.style.width=mx+"px";
			mark.style.height=my+"px";
			*/
		//－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－	
			//真实情况
			//1.创建元素节点
			var mark=document.createElement("div");
			//2.写标签样式
			mark.style.background="rgba(0,0,0,0.5)";
			mark.style.position="absolute";
			mark.style.top="0px";
			mark.style.left="0px";
			
			//3.获取HTML标签上的宽度和高度(关键)
			var mx=document.documentElement.clientWidth;
			var my=document.documentElement.clientHeight;
			//4.把HTML标签的高度和宽度赋给mark的宽高
			mark.style.width=mx+"px";
			mark.style.height=my+"px";
				
			//加特效：使用onresize 事件会在窗口或框架被调整大小时发生
			window.onresize=function (){
				//alert(1);
				//3.获取HTML标签上的宽度和高度(关键)
				var mx=document.documentElement.clientWidth;
				var my=document.documentElement.clientHeight;
				//4.把HTML标签的高度和宽度赋给mark的宽高
				mark.style.width=mx+"px";
				mark.style.height=my+"px";
			};
			
			
			//5.动态添加到body中
			document.body.appendChild(mark);
		</script>
	</body>
</html>
